<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>评分统计与历史记录</title>
    <script src="../../utils/reload.js"></script>
    <script src="./rests/3.4.17"></script>
    <link rel="stylesheet" href="../../style/all.min.css" />
    <script src="../../api/echarts.min.js"></script>
    <link rel="stylesheet" href="../../yl/index.css" />
    <link rel="stylesheet" href="../../style/index.css" />
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#165DFF",
              secondary: "#36CFC9",
              warning: "#FF7D00",
              danger: "#F53F3F",
              success: "#00B42A",
              "neutral-100": "#F2F3F5",
              "neutral-200": "#E5E6EB",
              "neutral-300": "#C9CDD4",
              "neutral-400": "#86909C",
              "neutral-500": "#4E5969",
              "neutral-600": "#272E3B",
              "neutral-700": "#1D2129",
            },
            fontFamily: {
              inter: ["Inter", "system-ui", "sans-serif"],
            },
            boxShadow: {
              card: "0 2px 14px 0 rgba(0, 0, 0, 0.06)",
              "card-hover": "0 4px 20px 0 rgba(0, 0, 0, 0.1)",
            },
          },
        },
      };
    </script>
    <style type="text/tailwindcss">
      .container {
        max-width: 100%;
      }
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .chart-container {
          @apply w-full h-[250px] sm:h-[300px] lg:h-[350px] bg-white rounded-lg shadow-card p-2 sm:p-4 transition-all duration-300;
        }
        .tab-active {
          @apply border-b-2 border-primary text-primary font-medium;
        }
        .table-row-hover {
          @apply transition-colors duration-200 hover:bg-neutral-100;
        }
        .pagination-responsive {
          @apply text-xs sm:text-sm;
        }
        @media (max-width: 640px) {
          .pagination-responsive .el-pagination__item,
          .pagination-responsive .el-pagination__prev,
          .pagination-responsive .el-pagination__next {
            @apply min-w-[28px] h-7 text-xs;
          }
        }
      }
    </style>
  </head>
  <body class="bg-neutral-100 font-inter text-neutral-700 min-h-screen">
    <div id="app">
      <div class="container mx-auto px-4 py-8">
        <div class="space-y-6">
          <div>
            <div
              class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 gap-4"
            >
              <h1
                class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700"
              >
                评分统计与历史记录
              </h1>
            </div>
            <div class="mb-8">
              <div
                class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-4"
              >
                <h2 class="text-lg font-semibold text-neutral-700">
                  评分趋势分析
                </h2>
                <div class="flex border-b border-neutral-200 overflow-x-auto">
                  <button
                    v-for="(item, index) in chartTypes"
                    :key="item.type"
                    :class="['px-3 sm:px-4 py-2 text-sm transition-all duration-200 whitespace-nowrap',currentType === item.type ? 'tab-active' : 'text-neutral-500']"
                    @click="changeType(item.type)"
                  >
                    {{ item.label }}
                  </button>
                  <!-- <button
                  id="daily-tab"
                  class="tab-active px-4 py-2 text-sm transition-all duration-200"
                >
                  每日
                </button>
                <button
                  id="weekly-tab"
                  class="px-4 py-2 text-sm text-neutral-500 transition-all duration-200"
                >
                  每周
                </button>
                <button
                  id="monthly-tab"
                  class="px-4 py-2 text-sm text-neutral-500 transition-all duration-200"
                >
                  每月
                </button> -->
                </div>
              </div>
              <div id="chart-container" class="chart-container"></div>
            </div>
            <div
              class="bg-white rounded-lg shadow-card overflow-hidden transition-all duration-300"
            >
              <div
                class="p-3 sm:p-4 border-b border-neutral-200 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3"
              >
                <h2 class="text-lg font-semibold text-neutral-700">历史记录</h2>
                <div class="relative w-full sm:w-auto">
                  <input
                    type="text"
                    placeholder="搜索记录..."
                    class="pl-10 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 w-full sm:w-[200px] md:w-[280px]"
                  />
                  <i
                    class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"
                  >
                  </i>
                </div>
              </div>
              <div class="overflow-x-auto">
                <table class="w-full min-w-[800px]">
                  <thead>
                    <tr class="bg-neutral-100 text-neutral-500 text-sm">
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        日期
                      </th>
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        商户名称
                      </th>
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        商户总分数
                      </th>
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        行政评分
                      </th>
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        用户评分
                      </th>
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        评分人数
                      </th>
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        状态
                      </th>
                      <th class="px-3 sm:px-6 py-3 text-left font-medium">
                        操作
                      </th>
                    </tr>
                  </thead>
                  <tbody id="history-table-body">
                    <!-- 示例数据行 -->
                    <tr
                      class="table-row-hover"
                      v-for="(item, index) in historyData"
                      :key="index"
                    >
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        {{item.Data_Date }}
                      </td>
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        {{item.Merchant_Alias}}
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          :class="['font-medium text-sm sm:text-base', getScoreClass(item.Total_Score)]"
                          >{{item.Total_Score}}</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          :class="['font-medium text-sm sm:text-base', getScoreClass(item.Admin_Score)]"
                          >{{item.Admin_Score}}</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          :class="['font-medium text-sm sm:text-base', getScoreClass(item.User_Score)]"
                          >{{item.User_Score}}</span
                        >
                      </td>
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        {{item.Count}}
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          :class="['px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm font-medium', getStatusClass(item.Status)]"
                          >{{item.Status}}</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <button
                          class="text-primary hover:text-primary/80 transition-colors duration-200 text-xs sm:text-sm"
                          :data-item="JSON.stringify(item)"
                          @click="showDetailModal(item)"
                        >
                          查看详情
                        </button>
                      </td>
                    </tr>
                    <!-- <tr class="table-row-hover">
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        2024-01-14
                      </td>
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        示例商户B
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="font-medium text-warning text-sm sm:text-base"
                          >87</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="font-medium text-warning text-sm sm:text-base"
                          >88</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="font-medium text-warning text-sm sm:text-base"
                          >86</span
                        >
                      </td>
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        18
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm font-medium bg-warning/10 text-warning"
                          >需关注</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <button
                          class="text-primary hover:text-primary/80 transition-colors duration-200 text-xs sm:text-sm"
                          data-item='{"date":"2024-01-14","merchant":"示例商户B","totalScore":87,"adminScore":88,"userScore":86,"count":18,"status":"需关注"}'
                        >
                          查看详情
                        </button>
                      </td>
                    </tr>
                    <tr class="table-row-hover">
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        2024-01-13
                      </td>
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        示例商户C
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="font-medium text-danger text-sm sm:text-base"
                          >82</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="font-medium text-danger text-sm sm:text-base"
                          >83</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="font-medium text-danger text-sm sm:text-base"
                          >81</span
                        >
                      </td>
                      <td
                        class="px-3 sm:px-6 py-3 sm:py-4 text-neutral-700 text-sm sm:text-base"
                      >
                        12
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <span
                          class="px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm font-medium bg-danger/10 text-danger"
                          >需改进</span
                        >
                      </td>
                      <td class="px-3 sm:px-6 py-3 sm:py-4">
                        <button
                          class="text-primary hover:text-primary/80 transition-colors duration-200 text-xs sm:text-sm"
                          data-item='{"date":"2024-01-13","merchant":"示例商户C","totalScore":82,"adminScore":83,"userScore":81,"count":12,"status":"需改进"}'
                        >
                          查看详情
                        </button>
                      </td>
                    </tr> -->
                  </tbody>
                </table>
              </div>
              <div
                class="p-3 sm:p-4 border-t border-neutral-200 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3"
              >
                <div class="text-xs sm:text-sm text-neutral-500">
                  显示
                  <span class="font-medium text-neutral-700">
                    {{ (currentPage - 1) * pageSize + 1 }}-{{
                    Math.min(currentPage * pageSize, historyData.length) }}
                  </span>
                  条，共
                  <span class="font-medium text-neutral-700">
                    {{ historyData.length }}
                  </span>
                  条记录
                </div>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="historyData.length"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  @current-change="handlePageChange"
                  class="pagination-responsive"
                ></el-pagination>
              </div>
            </div>
          </div>
          <!-- [/MODULE] c3d_评分统计与历史记录页面 -- 包含评分统计图表和历史记录列表 -->
        </div>
        <!-- [/MODULE] a1b_主内容区域 -- 包含评分统计与历史记录页面的所有内容 -->
      </div>
      <!-- 评分详情模态框 -->
      <div
        id="detail-modal"
        class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden opacity-0 transition-opacity duration-300"
      >
        <div
          class="bg-white rounded-lg shadow-lg w-full max-w-xs sm:max-w-md md:max-w-lg lg:max-w-2xl max-h-[90vh] overflow-y-auto transform scale-95 transition-transform duration-300 mx-4"
        >
          <div
            class="p-4 border-b border-neutral-200 flex justify-between items-center sticky top-0 bg-white z-10"
          >
            <h3 class="text-lg font-semibold text-neutral-700">评分详情</h3>
            <button
              id="close-modal"
              class="text-neutral-400 hover:text-neutral-700 transition-colors duration-200"
            >
              <i class="fas fa-times text-xl"> </i>
            </button>
          </div>
          <div class="p-4 sm:p-6" id="modal-content">
            <!-- 商户名称 -->
            <div class="mb-6">
              <h4 class="text-sm text-neutral-500 mb-1">商户名称</h4>
              <p
                class="text-lg font-medium text-neutral-700"
                id="modal-merchant-name"
              >
                示例商户
              </p>
            </div>

            <!-- 日期 -->
            <div class="mb-6">
              <h4 class="text-sm text-neutral-500 mb-1">日期</h4>
              <p class="text-neutral-700" id="modal-date">2024-01-15</p>
            </div>

            <!-- 评分卡片 -->
            <div
              class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-6"
            >
              <div class="bg-neutral-100 rounded-lg p-4 text-center">
                <h4 class="text-sm text-neutral-500 mb-2">商户总分数</h4>
                <p
                  class="text-3xl font-bold text-success"
                  id="modal-total-score"
                >
                  95
                </p>
              </div>
              <div class="bg-neutral-100 rounded-lg p-4 text-center">
                <h4 class="text-sm text-neutral-500 mb-2">行政评分</h4>
                <p
                  class="text-3xl font-bold text-success"
                  id="modal-admin-score"
                >
                  96
                </p>
              </div>
              <div class="bg-neutral-100 rounded-lg p-4 text-center">
                <h4 class="text-sm text-neutral-500 mb-2">用户评分</h4>
                <p
                  class="text-3xl font-bold text-success"
                  id="modal-user-score"
                >
                  94
                </p>
              </div>
            </div>

            <!-- 评分人数 -->
            <div class="mb-6">
              <h4 class="text-sm text-neutral-500 mb-2">评分人数</h4>
              <p class="text-neutral-700" id="modal-count">25人参与评分</p>
            </div>

            <!-- 状态 -->
            <div class="mb-6">
              <h4 class="text-sm text-neutral-500 mb-2">状态</h4>
              <span
                class="px-3 py-1 rounded-full text-sm font-medium bg-success/10 text-success"
                id="modal-status"
                >正常</span
              >
            </div>

            <!-- 评分趋势 -->
            <div class="mb-6">
              <h4 class="text-sm text-neutral-500 mb-2">评分趋势</h4>
              <div
                class="w-full h-[190px] bg-neutral-100 rounded-lg p-2"
                id="mini-chart"
              ></div>
            </div>

            <!-- 操作按钮 -->
            <div
              class="flex flex-col sm:flex-row sm:justify-end gap-3 pt-4 border-t border-neutral-200"
            >
              <button
                id="modal-close-btn"
                class="w-full sm:w-auto px-4 py-2 border border-neutral-200 text-neutral-600 rounded-lg hover:bg-neutral-100 transition-colors duration-200"
              >
                关闭
              </button>
              <!-- <button
              class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200"
            >
              导出详情
            </button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <!-- 外部脚本文件 -->
  <script src="../../utils/utils.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
  <script src="../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script>
  <script src="./js/Merchant_rating.js"></script>
</html>
